<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/common_css :: commonHeader('添加子菜单')">
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-menu-add">
        <input type="hidden" name="menuPid" th:value="${menuPid }"/>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>菜单名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="菜单名称（必填）" id="menuName" name="menuName" maxlength="50" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">菜单别名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="菜单别名" id="aliasName" name="aliasName" maxLength="50" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">菜单图标：</label>
            <div class="formControls col-xs-8 col-sm-9">
						<span class="btn-upload form-group">
						  <input class="input-text upload-url radius" type="text" name="menuIcon" id="menuIcon" maxlength="128" readonly="readonly" onclick="javascript:selectIcon();"/>
						  	  <span class="icon Hui-iconfont" id="iconPreview">未选择图标</span>
						  	  &nbsp;
							  <a href="javascript:selectIcon();" class="btn btn-primary radius">
							  	<i class="Hui-iconfont">&#xe642;</i> 选择图标
							  </a>
						</span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>菜单URL：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="菜单URL" name="menuUrl" id="menuUrl" maxlength="255" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>权限标识：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="权限标识" value="authc" name="authPerms" id="authPerms" maxlength="500" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">菜单说明：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="menuDesc" maxlength="200" class="textarea"  placeholder="菜单说明...200个字符以内" onKeyUp="javascript:textareaLength(this);"></textarea>
                <p class="textarea-numberbar"><em class="textarea-length"><span id="textareaLengthSpan">0</span></em>/200</p>
            </div>
        </div>
        <div class="row cl">
            <div style="text-align: center;">
                <button class="btn btn-primary radius" type="submit">
                    <i class="Hui-iconfont">&#xe632;</i> 保存
                </button>
                &nbsp;&nbsp;
                <button onClick="layer_close();" class="btn btn-default radius" type="button">
                    &nbsp;&nbsp;取消&nbsp;&nbsp;
                </button>
            </div>
        </div>
    </form>
</article>
<div th:include="admin/common/common_js :: onLoadJS"></div>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript">
    $(function(){
        $("#form-menu-add").validate({
            rules:{
                menuName:{required:true, minlength:2, maxlength:50,remote: {
                    url: '/pestdiagnosis/sys/menu/validateIsMenuExist',
                    type: 'post',
                    dataType: 'json',
                    data: {validateType:'menuName' ,menuName: function () {return $.trim($("#menuName").val());}},
                    dataFilter: function (data) {
                        if(data != null && data != '') {
                            if (eval('(' + data + ')').data == '0') {
                                return true;
                            } else {
                                return false;
                            }
                        } else {
                            return false;
                        }
                    }
                }},
                aliasName:{required:false, minlength:2, maxlength:50},
                menuIcon:{required:false, maxlength:128},
                menuUrl:{required:true, minlength:8, maxlength:255,remote: {
                    url: '/pestdiagnosis/sys/menu/validateIsMenuExist',
                    type: 'post',
                    dataType: 'json',
                    data: {validateType:'menuUrl' ,menuUrl: function () {return $.trim($("#menuUrl").val());}},
                    dataFilter: function (data) {
                        if(data != null && data != '') {
                            if (eval('(' + data + ')').data == '0') {
                                return true;
                            } else {
                                return false;
                            }
                        } else {
                            return false;
                        }
                    }
                }},
                authPerms:{ required:true, maxlength:500}
            },
            messages:{
                menuName:{remote:'菜单名称已经存在'},
                menuUrl:{remote:'菜单URL已经存在'}
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                send(
                    '/pestdiagnosis/sys/menu/addSub',
                    $('#form-menu-add').serialize(),
                    function (data) {
                        if(data.result == 0) {
                            layer.msg(data.message, {icon: 1,time: 1500}, function() {
                                window.parent.location.href = "/pestdiagnosis/sys/menu/list";
                            });
                        } else {
                            layer.msg(data.message, {icon: 5,time: 1500});
                            $('#menuName').focus();
                        }
                    },
                    function (res) {

                    }
                );

            }
        });
    });
    // 计算文本域字符长度
    function textareaLength(obj) {
        $('#textareaLengthSpan').text($(obj).val().length);
    }
    // 选择图标
    function selectIcon() {
        layer_show('选择图标','/pestdiagnosis/sys/menu/icon', 400, 300);
    }
</script>
</body>
</html>